<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #box1 {width:500px; margin: 0 auto;padding: 0;text-align: center;}
    #box2 {
        background-color: black; width: 100px; height: 100px;
        margin: 10px auto;
    }
    </style>

    
</head>
<body>
<form id="box1">
    <input type="button" value="变宽" onclick="c_width()" />
    <input type="button"  value="变高" onclick="c_height()" />
    <input type="button" value="变色" onclick="c_color()" />
    <input type="button" value="隐藏" onclick="c_hide()" />
    <input type="button" value="重置" onclick="c_reset()"/>
    <div id="box2"></div>
</form>
<script type="text/javascript">
    var c_b = document.getElementById("box2");
    function c_width() {
        c_b.style.width="200px";
    }
    function c_height() {
        c_b.style.height="200px";
    }
    function c_color() {
        c_b.style.backgroundColor="red";
    }
    function c_hide() {
        c_b.style.visibility="hidden";
    }
    function c_reset() {
        c_b.style.cssText ="background-color: black; width: 100px; height: 100px;";
    }
</script>
</body>
</html>